<template>
	<view class="">
		<!-- #ifdef H5 -->
		<view class="bg" v-if="showflag"></view>
		<view :class="['navigation_arrows', !showflag ? 'navigation_arrows_show' : '']">
			<view class="navigation_left" @tap="show">
				<view class="arrows">{{ jiant }}</view>
				<view class="nav_titel">快速导航</view>
			</view>
			<view class="navigation_nav">
				<view class="navigation_nav_i" @tap="tohomepage">
					<!-- <i class="icon">&#xe6eb;</i> -->
					<image src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/newPicter/easy_homepage.png" mode=""></image>
					<view class="wz">首页</view>
				</view>
				<view class="navigation_nav_i" @tap="toback">
					<!-- <i class="icon">&#xe63f;</i> -->
					<image src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/newPicter/easy_previde.png" mode=""></image>
					<view class="wz">上一页</view>
				</view>
			</view>
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
export default {
	data() {
		return {
			showflag: false,
			jiant: '<<'
		};
	},
	methods: {
		show() {
			this.showflag = !this.showflag;
		},
		tohomepage() {
			// uni.switchTab({
			// 	url: '/pages/index/index'
			// })
			uni.reLaunch({
				url: '/pages/index/index'
			});
		},
		toback() {
			uni.navigateBack({
				delta: 1
			});
		}
	}
};
</script>

<style lang="less" scoped>
.bg {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.3);
	z-index: 99;
}

.navigation_arrows {
	position: fixed;
	right: 0;
	bottom: 160upx;
	z-index: 99;
	display: flex;
	align-items: center;
	transition: all 0.6s;
	.navigation_left {
		background-color: rgba(0, 0, 0, 0.3);
		width: 120upx;
		height: 80upx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-top-left-radius: 40upx;
		border-bottom-left-radius: 40upx;
		.arrows {
			color: #ffffff;
			font-size: 24upx;
			margin-right: 6upx;
		}
		.nav_titel {
			display: flex;
			width: 60upx;
			line-height: 24upx;
			font-size: 24upx;
			color: #ffffff;
		}
	}
	.navigation_nav {
		width: 260upx;
		height: 140upx;
		background-color: #ffffff;
		display: flex;
		justify-content: space-around;
		border-bottom-left-radius: 8upx;
		border-top-left-radius: 8upx;
		.navigation_nav_i {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			// .icon {
			// 	font-size: 40upx;
			// }
			image {
				width: 48upx;
				height: 48upx;
			}
			.wz {
				// margin-top: 10upx;
				font-size: 24upx;
				color: #333;
			}
		}
		.navigation_nav_i:first-child {
			image {
				width: 52upx;
				height: 52upx;
			}
		}
	}
}
.navigation_arrows_show {
	transform: translateX(260upx);
}
</style>
